// //dom0 事件
// window.onload = function() {
// 	var dragBox = document.getElementById("dragBox");
// 	dragBox.onmousedown = function(event) {
// 		event = event || window.event;
// 		//元素初始坐标
// 		var eleInitX = dragBox.offsetLeft;
// 		var eleInitY = dragBox.offsetTop;
// 		//鼠标点击坐标
// 		var mouseInitX = event.clientX;
// 		var mouseInitY = event.clientY;
// 		document.onmousemove = function(event) {
// 			event = event || window.event;
// 			//鼠标移动过程中的触点坐标
// 			var mouseMovingX = event.clientX;
// 			var mouseMovingY = event.clientY;
// 			//移动过程中的元素的坐标
// 			var eleFinalX = mouseMovingX - mouseInitX + eleInitX;
// 			var eleFinalY = mouseMovingY - mouseInitY + eleInitY;
// 			//设置拖拽边界，临界值
// 			if (eleMovingX > document.documentElement.clientWidth - dragBox.offsetWidth) {
// 				eleMovingX = document.documentElement.clientWidth - dragBox.offsetWidth;
// 			} else if (eleMovingX < 0) {
// 				eleMovingX = 0;
// 			}
// 			if (eleMovingY > document.documentElement.clientHeight - dragBox.offsetHeight) {
// 				eleMovingY = document.documentElement.clientHeight - dragBox.offsetHeight;
// 			} else if (eleMovingY < 0) {
// 				eleMovingY = 0;
// 			}
// 			//实时修改元素坐标
// 			dragBox.style.left = eleFinalX + "px";
// 			dragBox.style.top = eleFinalY + "px";
// 		}
// 		//结束拖拽
// 		document.onmouseup = function(event) {
// 			event = event || window.event;
// 			document.onmousemove = document.onmouseup = null;
// 		}
//      //清除浏览器默认样式
// 		return false;
// 	}
// }

//dom2 事件
window.onload = function() {
	var dragBox = document.getElementById("dragBox");

	function getPos(event) {
		event = event || window.event;
		//元素初始坐标
		var eleInitX = dragBox.offsetLeft;
		var eleInitY = dragBox.offsetTop;
		//鼠标点击坐标
		var mouseInitX = event.clientX;
		var mouseInitY = event.clientY;

		function getMovingPos(event) {
			event = event || window.event;
			//鼠标移动过程中的触点坐标
			var mouseMovingX = event.clientX;
			var mouseMovingY = event.clientY;
			//移动过程中的元素的坐标
			var eleMovingX = mouseMovingX - mouseInitX + eleInitX;
			var eleMovingY = mouseMovingY - mouseInitY + eleInitY;
			//设置拖拽边界，临界值
			if (eleMovingX > document.documentElement.clientWidth - dragBox.offsetWidth) {
				eleMovingX = document.documentElement.clientWidth - dragBox.offsetWidth;
			} else if (eleMovingX < 0) {
				eleMovingX = 0;
			}
			if (eleMovingY > document.documentElement.clientHeight - dragBox.offsetHeight) {
				eleMovingY = document.documentElement.clientHeight - dragBox.offsetHeight;
			} else if (eleMovingY < 0) {
				eleMovingY = 0;
			}
			//实时修改元素坐标
			dragBox.style.left = eleMovingX + "px";
			dragBox.style.top = eleMovingY + "px";
		}
		
		//结束拖拽
		function stopMove(event) {
			event = event || window.event;
			document.removeEventListener('mousemove', getMovingPos);
			document.removeEventListener('mouseup', stopMove);
		}
		document.addEventListener('mousemove', getMovingPos);
		document.addEventListener('mouseup', stopMove);
		//清除浏览器默认样式
		event.preventDefault();
	}
	dragBox.addEventListener('mousedown', getPos);
}
